import React, { Component } from 'react';
import Input from '../components/Input'
import Condition from '../components/condition_pan'
import { Card, Layout, BackTop } from 'antd';
import { scrollToAnchor } from './CusInput'
import UsageComponent from './usage';
const { Header, Footer, Content } = Layout;
import { CusFooter } from './Footer'

const card_style = {
    paddingTop: 50,
    paddingBottom: 40,
}

const padding_style = {
    background: 'white',
    height: 20,
    width: "100%"
}

const footer_style = {
    backgroundColor: 'white'
}

export default class SearchMain extends Component{
    componentDidMount() {
        scrollToAnchor();
    }

    shouldComponentUpdate(nextProps, nextState){
        return !(this.props === nextProps || is(this.props, nextProps)) ||
            !(this.state === nextState || is(this.state, nextState));
    }

    render() {

        return (
            <Layout>
                <Content>
                    <div>
                        <BackTop/>
                        <Card style={card_style}>
                            <Input/>
                            <Condition/>
                        </Card>
                        <div style={padding_style}></div>
                        <UsageComponent/>
                    </div>
                </Content>
                <Footer style={footer_style}>
                    <CusFooter/>
                </Footer>
            </Layout>

        )

    }
}